<!--
 * @Author: bln
 * @Date: 2024-08-07 00:00:00
 * @FilePath: dev\pages\law\onSiteDisposal\subPage.vue
 * @Description: 现场处置-首页
-->

<template>
  <view class="content">
    <u-grid :col="4" :border="false" class="grid">
      <u-grid-item v-for="item in checkMenus" :key="item.id">
        <view class="grid-item" @click="checkMenu(item)">
          <u-image src="/static/law/xccz-1.png" width="60px" height="60px" />
          <view class="grid-item-title">{{ item.name }}</view>
        </view>
      </u-grid-item>
    </u-grid>
  </view> 
</template>

<script>
import queryService from '@/service/query/query.service.js'

export default {
  data() {
    return {
      checkMenus: []
    }
  },
  mounted() {
    this.loadMenu()
  },
  methods: {
    //加载菜单
    loadMenu() {
      queryService.getLawsMenu({ parentId: '9903' }).then(dr => {
        this.$u.hideLoading()
        if (dr.success) {
          this.checkMenus =  [...dr.data] || []
        }
      }).catch((err) => {
        this.$u.error(err)
        this.$u.hideLoading()
      })
    },
    // 菜单跳转
    checkMenu(item) {
      this.$u.route({
        url: '/pages/law/onSiteDisposal/subPage',
        params: {
          id: item.id,
          title: item.name
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  background-position: left top;
  background-repeat: round;
  background-size: cover;
  background-image: url(../../../static/law/bg.png);
}
.grid {
  bottom: 50px;
  position: absolute;
  overflow: auto;
  max-height: 206px;
  background-color: #fff;
}
/deep/ .u-grid-item-box {
  padding: 10px 0!important;
}
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.grid-item-title {
  color: #333;
  margin-top: 10rpx;
}
</style>